<template>
  <div class="app-container">
    <el-row>
      <el-col :span="3">
        <mp-list-left @choose="setCurrentMp"/>
      </el-col>
      <el-col :span="20" class="margin-left-10">
        <div class="fl" style="position: relative;margin-right:20px;">
          <img src="@/assets/images/menu_head.png" class="top_bg">
          <div class="mp_name">{{ currentMp.name }}</div>
          <img src="@/assets/images/menu_foot.png" class="bottom_bg">
          <div class="phone_main_bg"/>
          <div class="menus">
            <div v-for="(item,index) in menus" :key="index" class="item">
              <div v-if="manMenuIndex == index">
                <div class="add" @click="addSubMenu(index)">
                  <i class="el-icon-plus"/>
                  <div class="arrow"/>
                </div>
                <div class="sub_item">
                  <div v-for="(item,index) in item.children" :key="index" :class="subMenuIndex == index ? 'active':''" class="text" @click="chooseSubMenu(item,index)">{{ item.name }}</div>
                </div>
              </div>
              <div :class="manMenuIndex == index ? 'active':''" class="text" @click="chooseManMenu(item,index)">{{ item.name }}</div>
            </div>
            <div v-if="menus.length < 3" class="item">
              <div class="text" @click="addMainMenu"><i class="el-icon-plus"/></div>
            </div>
          </div>
        </div>
        <el-card class="box-card menu-content">
          <div slot="header">
            <span>{{ currentMenu? '菜单':'请选择菜单' }}</span>
            <el-button v-if="currentMenu" class="menu-del" type="text" @click="delMenu">删除菜单</el-button>
          </div>
          <el-form v-if="currentMenu" label-width="80px">
            <el-form-item label="菜单名称:">
              <el-input v-model="currentMenu.name" placeholder="请输入菜单名称"/>
              <div class="tip">1.自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。</div>
              <div class="tip">2.一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替</div>
            </el-form-item>
            <el-form-item label="菜单内容:">
              <el-select v-model="categoryIndex" @change="changeCategory">
                <el-option v-for="(category,index) in contentTypes" :label="category.name" :value="category.value" :key="index">{{ category.name }}</el-option>
              </el-select>
            </el-form-item>
            <div v-if="categoryIndex === 1" class="item-content">
              <el-form-item label="页面地址">
                <el-input v-model="currentMenu.webUrl" placeholder="请输入页面地址"/>
                <p class="tip">订阅者点击该子菜单会跳到以下链接</p>
              </el-form-item>
            </div>
            <div v-if="categoryIndex === 2" class="item-content">
              <el-form-item>
                <div>小程序APPID</div>
                <el-input v-model="currentMenu.appId" type="text" placeholder="小程序的appid（仅认证公众号可配置）"/>
                <div>小程序路径</div>
                <el-input v-model="currentMenu.pagePath" type="text" placeholder="小程序的页面路径 pages/Index/index"/>
                <div>备用网页</div>
                <el-input v-model="currentMenu.miniProUrl" type="text" placeholder="旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。"/>
                <div class="tip">小程序需要和公众号进行关联才能生效哦!</div>
              </el-form-item>
            </div>
            <div v-if="categoryIndex ===0" class="item-content">
              <mp-msg-type-component :platform-id="listQuery.platformId" :mp="currentMp" :item="currentMenu"/>
            </div>
          </el-form>
        </el-card>
        <el-footer class="text-center margin-top-20">
          <el-button v-permission="['mp:menu_merge']" type="success" @click="save">保存</el-button>
          <el-button v-permission="['mp:menu_push']" type="warning" @click="pushMenu">发布</el-button>
        </el-footer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MpListLeft from '@/views/wechat/mp_list_left'
import { MpMenuService } from '@/api/WeChatService'
import { Notify } from '@/utils/notify'
import MpMaterialPic from '@/views/wechat/mp_material_pic'
import MpMaterialNews from '@/views/wechat/mp_material_news'
import MpMaterialVoice from '@/views/wechat/mp_material_voice'
import MpMaterialVideo from '@/views/wechat/mp_material_video'
import MpMsgTypeComponent from '@/views/wechat/mp_msgtype_component.vue'

class MpMenu {
  constructor(name) {
    this.name = name
    this.category = 0
    this.key = undefined
    this.content = undefined
    this.pictureMedia = undefined
    this.voiceMedia = undefined
    this.voiceName = undefined
    this.videoMedia = undefined
    this.videoName = undefined
    this.newsMedia = undefined
    this.webUrl = undefined
    this.appId = undefined
    this.pagePath = undefined
    this.miniProUrl = undefined
    this.children = []
    this.seq = 0
  }
}

export default {
  name: 'MpMenu',
  components: { MpMsgTypeComponent, MpListLeft, MpMaterialPic, MpMaterialNews, MpMaterialVoice, MpMaterialVideo },
  data() {
    return {
      listQuery: { platformId: undefined }, categoryIndex: 0,
      contentTypes: [
        { name: '发送消息(media_id)', value: 0 }, { name: '跳转网页(view)', value: 1 }, { name: '打开指定小程序(miniprogram)', value: 2 },
        { name: '扫码上传消息(scancode_push)', value: 9 }, { name: '扫码提示下发(scancode_waitmsg)', value: 10 },
        { name: '系统相机拍照(pic_sysphoto)', value: 11 }, { name: '弹出拍照或者相册(pic_photo_or_album)', value: 12 },
        { name: '弹出微信相册(pic_weixin)', value: 13 }, { name: '弹出地理位置选择器(location_select)', value: 14 }],
      manMenuIndex: 0, subMenuIndex: -1, currentMp: {}, currentMenu: undefined, menus: [],
      dialogVoiceVisible: false, dialogPicVisible: false, dialogNewsVisible: false, dialogVideoVisible: false
    }
  },
  methods: {
    setCurrentMp(data) {
      this.currentMp = data
      this.listQuery.platformId = data.id
      this.listMenus()
    },
    listMenus() {
      this.currentMenu = undefined
      this.categoryIndex = -1
      MpMenuService.getMenus(this.listQuery).then(result => {
        this.menus = result
      })
    },
    resetMenuSeq() {
      this.menus.forEach((menu, index) => {
        menu.seq = index + 1
        const children = menu.children
        if (children) {
          children.forEach((child, subIndex) => {
            child.seq = subIndex + 1
          })
        }
      })
    },
    addMainMenu() {
      const length = this.menus.length + 1
      this.categoryIndex = undefined
      const menu = new MpMenu('菜单' + length)
      this.menus.push(menu)
      this.currentMenu = menu
    },
    addSubMenu(index) {
      const length = this.menus[index].children.length + 1
      const menu = new MpMenu('子菜单' + length)
      this.categoryIndex = 0
      menu.category = 3 // 默认文本消息
      this.menus[index].children.push(menu)
      this.currentMenu = menu
    },
    delMenu() {
      const that = this
      this.$confirm('您确认删除该菜单吗', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        if (that.subMenuIndex === -1) {
          that.menus.splice(that.manMenuIndex, 1)
        } else {
          that.menus[that.manMenuIndex].children.splice(that.subMenuIndex, 1)
        }
        that.currentMenu = undefined
      }).catch(() => {})
    },
    chooseManMenu(item, index) {
      this.subMenuIndex = -1
      this.manMenuIndex = index
      this.currentMenu = item
      if (this.currentMenu.category >= 3 && this.currentMenu.category <= 8) {
        this.categoryIndex = 0
      } else {
        this.categoryIndex = this.currentMenu.category
      }
    },
    chooseSubMenu(item, index) {
      this.subMenuIndex = index
      this.currentMenu = item
      if (this.currentMenu.category >= 3 && this.currentMenu.category <= 8) {
        this.categoryIndex = 0
      } else {
        this.categoryIndex = this.currentMenu.category
      }
    },
    changeCategory(data) {
      if (parseInt(data) !== 0) {
        this.currentMenu.category = parseInt(data)
      }
    },
    save() {
      const json = { platformId: this.listQuery.platformId, menus: this.menus }
      this.resetMenuSeq()
      MpMenuService.addMenu(json).then(() => {
        Notify.success(this, '添加成功!')
      })
    },
    pushMenu() {
      MpMenuService.pushMenu(this.listQuery).then(result => {
        Notify.success(this, '发布成功!')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .mp_name{position: absolute;top: 35px;width: 320px;color: #ffffff;text-align: center;}
  .phone_main_bg {min-height: 550px;width: 318px;border:1px solid #E7E7EB;z-index:100}
  .top_bg {position: absolute;top: 0px;}
  .bottom_bg {position: absolute;bottom: 0px;z-index: -1;}
  .menus {
    position: absolute;bottom: -2px;left: 43px;width: 100%;z-index: 999;
    .item{
      margin:0px;float: left;width: 90px;line-height: 48px;border: 1px solid #E7E7EB;background: #FAFAFA;text-align: center;cursor: pointer;color: #999;position: relative;
      .active {border: 1px solid #44B549 !important;color: #44B549 !important;}
      .add {position: absolute;bottom: 60px;width: 100%;line-height: 48px;border: 1px solid #E7E7EB;background: #FAFAFA;}
      .arrow {position: absolute;bottom: -16px;left: 36px;width: 0;height: 0;font-size: 0;border: solid 8px;border-color:#f4f5f9 transparent transparent transparent;}
      .sub_item {
        position: absolute;bottom: 110px;width: 100%;line-height: 48px;background: #FAFAFA;border:1px solid #E7E7EB;
        .text:hover{background: #d3d0d052;color: #44b549;}
      }
    }
  }
  .menu-content{
    min-height: 550px;
    .tip{color: #aaaaaa;font-size: 12px;}
    .menu-del{float: right; padding: 3px 0;}
    .item-content{
      background: #fafafa;padding: 20px;
      .box{
        border: 1px solid #e7e7eb;height: 180px;line-height: 180px;text-align: center;
      }
    }
  }
</style>
